<!--
 * @Description: 积分审批 - 审批记录
 * @Author: binbin binbin@qq.com
 * @Date: 2024-03-05
 * @LastEditors: Bart 1714877505@qq.com
 * @LastEditTime: 2025-03-19
-->
<template>
  <div class="edit">
    <a-timeline>
      <a-timeline-item v-for="(item, index) in recordList" :key="index">
        <div class="record-nodeName">
          {{ item.taskDisplayName }}
          <span v-if="item.nodeType === 'userAny'">（需以下其中一位人员审批）</span>
          <span v-if="item.nodeType === 'userAll'">（需以下全部人员审批）</span>
        </div>
        <div class="record-content" v-if="item.taskActorVOS && item.taskActorVOS !== null">
          <div class="record-item" v-for="(inow, key) in item.taskActorVOS" :key="key">
            <div class="record-left">
              <span class="normal-text">{{ inow.actorName && inow.actorName !== null ? inow.actorName : '匿名用户' }}</span>
              <span :class="inow.taskStatus === '0' ? 'agree-text' : inow.taskStatus === '-1' ? 'reject-text' : inow.taskStatus === '3' ? 'refuse-text' : inow.taskStatus === '4' ? 'auto-pass-text' : inow.taskStatus === '5' ? 'auto-reject-text' : ''">{{ taskStatus[inow.taskStatus] }}</span>
            </div>
            <div class="record-middle" v-if="inow.formFieldVOS && inow.formFieldVOS !== null">
              <div class="middle-item" v-for="formItem in inow.formFieldVOS" :key="formItem.fieldId">
                <span class="normal-text" v-if="formItem.fieldValue && formItem.fieldValue !== null"> {{ formItem.fieldName }}: </span>
                <span class="normal-text" v-if="formItem.fieldValue && formItem.fieldValue !== null">
                  <!-- <span v-if="formItem.fieldKey === 'orgLevel'">{{ cmsOrgTypeList[formItem.fieldValue] }}</span> -->
                  <span> {{ formItem.fieldValue }}</span>
                </span>
              </div>
            </div>
            <div class="record-right" v-if="inow.taskEndTime && inow.taskEndTime !== null">
              <span class="grey-text">{{ getDateDiff(inow.taskEndTime) }}</span>
              <span class="grey-text">{{ inow.taskEndTime }}</span>
            </div>
          </div>
        </div>
        <div class="record-content" v-else>
          <div class="record-item" v-if="item.taskEndTime && item.taskEndTime !== null">
            <div class="record-right">
              <span class="grey-text">{{ getDateDiff(item.taskEndTime) }}</span>
              <span class="grey-text">{{ item.taskEndTime }}</span>
            </div>
          </div>
        </div>
      </a-timeline-item>
    </a-timeline>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  const props = defineProps({
    recordList: { type: Array as any, default: () => [] },
  })

  const taskStatus = ref({
    '-1': '拒绝',
    '2': '撤销审核',
    '0': '通过',
    '1': '待审批',
    '3': '驳回',
    '4': '自动通过',
    '5': '自动拒绝',
  })

  const getDateDiff = (dateStr) => {
    const dateTimeStamp = Date.parse(dateStr.replace(/-/gi, '/'))
    var minute = 1000 * 60
    var hour = minute * 60
    var day = hour * 24
    var month = day * 30
    var now = new Date().getTime()
    var diffValue = now - dateTimeStamp
    if (diffValue < 0) {
      return
    }
    var monthC = diffValue / month
    var weekC = diffValue / (7 * day)
    var dayC = diffValue / day
    var hourC = diffValue / hour
    var minC = diffValue / minute
    var result = ''
    if (monthC >= 1) {
      result = '' + parseInt(monthC) + '月前'
    } else if (weekC >= 1) {
      result = '' + parseInt(weekC) + '周前'
    } else if (dayC >= 1) {
      result = '' + parseInt(dayC) + '天前'
    } else if (hourC >= 1) {
      result = '' + parseInt(hourC) + '小时前'
    } else if (minC >= 1) {
      result = '' + parseInt(minC) + '分钟前'
    } else {
      result = '刚刚'
    }
    return result
  }
</script>

<style lang="less" scoped>
  .record-nodeName {
    font-size: 16px;
    font-family: 'PingFang SC', 'PingFang SC-Medium';
    font-weight: 600;
    color: rgb(0 0 0 / 85%);
    margin-bottom: 13px;
  }

  .record-content {
    width: 100%;
    display: flex;
    flex-direction: column;

    .record-item {
      padding: 16px;
      box-sizing: border-box;
      background: #f4f7f9;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;

      .record-left {
        display: flex;
        margin-bottom: 10px;

        span:nth-of-type(1) {
          margin-right: 10px;
        }

        &:nth-last-of-type(1) {
          margin: 0;
        }
      }

      .record-middle {
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;

        &:nth-last-of-type(1) {
          margin: 0;
        }

        .middle-item {
          width: 100%;
          display: flex;
          margin-bottom: 10px;

          span:nth-of-type(1) {
            margin-right: 10px;
            max-width: max-content;
          }

          &:nth-last-of-type(1) {
            margin: 0;
          }

          span:nth-of-type(2) {
            flex: 1;
          }
        }
      }

      .record-right {
        display: flex;

        span:nth-of-type(1) {
          margin-right: 10px;
        }
      }

      .record-left .normal-text,
      .record-middle .normal-text,
      .record-right .normal-text {
        font-size: 14px;
        font-family: 'PingFang SC', 'PingFang SC-Regular';
        font-weight: 400;
        color: rgb(0 0 0 / 85%);
        max-width: max-content;
      }

      .record-left .grey-text,
      .record-middle .grey-text,
      .record-right .grey-text {
        font-size: 14px;
        font-family: 'PingFang SC', 'PingFang SC-Regular';
        font-weight: 400;
        color: rgb(0 0 0 / 50%);
      }

      .record-left .reject-text,
      .record-middle .reject-text,
      .record-right .reject-text {
        font-size: 14px;
        font-family: 'PingFang SC', 'PingFang SC-Regular';
        font-weight: 400;
        color: #ff1a2e;
      }

      .record-left .auto-pass-text,
      .record-middle .auto-pass-text,
      .record-right .auto-pass-text {
        font-size: 14px;
        font-family: 'PingFang SC', 'PingFang SC-Regular';
        font-weight: 400;
        color: #1a91fc;
      }

      .record-left .refuse-text,
      .record-middle .refuse-text,
      .record-right .refuse-text {
        font-size: 14px;
        font-family: 'PingFang SC', 'PingFang SC-Regular';
        font-weight: 400;
        color: #fdad00;
      }

      .record-left .auto-reject-text,
      .record-middle .auto-reject-text,
      .record-right .auto-reject-text {
        font-size: 14px;
        font-family: 'PingFang SC', 'PingFang SC-Regular';
        font-weight: 400;
        color: #ff4f5e;
      }

      .record-left .agree-text,
      .record-middle .agree-text,
      .record-right .agree-text {
        font-size: 14px;
        font-family: 'PingFang SC', 'PingFang SC-Regular';
        font-weight: 400;
        color: #1890ff;
      }
    }
  }
</style>
